/* 该文件变量用于定义不同模式下的颜色变量
 * 浅色模式于深色模式变量一一对应
 * 变量命名统一使用 --fc- 前缀，防止与其他变量冲突
*/

/* 浅色模式 */
:root {
  /* 填充色 */
  --fc-fill-1: rgb(248 250 252);
  --fc-fill-2: rgb(255 255 255);
  --fc-fill-2-5: rgb(250 250 250);
  --fc-fill-3: rgb(243 244 246);
  --fc-fill-4: rgb(229 231 235);
  --fc-fill-5: rgb(209 213 219);
  --fc-fill-6: rgb(189 194 202);
  --fc-fill-7: rgb(151 156 163);
  --fc-fill-primary: rgb(108 83 177);
  --fc-fill-success: rgb(0 167 0);
  --fc-fill-warning: rgb(250 200 0);
  --fc-fill-alert: rgb(250 125 0);
  --fc-fill-error: rgb(200 0 0);
  --fc-fill-gold: #ffbc0d;

  /* 文本 */
  --fc-text-1: #1a1a1a;
  --fc-text-2: #333333;
  --fc-text-3: #666666;
  --fc-text-4: #999999;
  --fc-text-5: #d1d1d9;
  --fc-text-link: #8162dc;
  --fc-text-link-light: #a186f4; /* 用于 tooltip 里加亮链接颜色 */
  --fc-text-link-rgb: 129, 98, 220;
  --fc-text-placeholder: #bfbfbf;

  /* 其他 */
  --fc-primary-color: var(--fc-text-link);
  --fc-border-color: var(--fc-fill-4);
  --fc-border-color2: #d9d9d9;
  --fc-border-base: var(--fc-fill-5);
  --fc-antd-border-color: #d9d9d9; /* 用于 跟antd button 连结的边框 */
  --fc-background-color-light: rgba(250, 250, 250, 1);

  /* 需特殊处理额外加的变量 
     灭火图一级卡片的header背景色:  --fc-variable-fill-1
  */
  --fc-variable-fill-1: var(--fc-fill-2);

  /* 红色 */
  --fc-red-1-color: #fff1f0;
  --fc-red-2-color: #ffccc7;
  --fc-red-3-color: #ffa39e;
  --fc-red-4-color: #ff7875;
  --fc-red-5-color: #ff4d4f;
  --fc-red-6-color: #f5222d;

  /* 橘色 */
  --fc-orange-1-color: #fff7e6;
  --fc-orange-2-color: #ffe7ba;
  --fc-orange-3-color: #ffd591;
  --fc-orange-4-color: #ffc069;
  --fc-orange-5-color: #ffa940;
  --fc-orange-6-color: #fa8c16;

  /* 金色 */
  --fc-gold-1-color: #fffbe6;
  --fc-gold-2-color: #fff1b8;
  --fc-gold-3-color: #ffe58f;
  --fc-gold-4-color: #ffd666;
  --fc-gold-5-color: #ffc53d;
  --fc-gold-6-color: #faad14;

  /* 绿色 */
  --fc-green-1-color: #f6ffed;
  --fc-green-2-color: #d9f7be;
  --fc-green-3-color: #b7eb8f;
  --fc-green-4-color: #95de64;
  --fc-green-5-color: #73d13d;
  --fc-green-6-color: #52c41a;

  /* 紫色 */
  --fc-purple-1-color: #f9f0ff;
  --fc-purple-2-color: #efdbff;
  --fc-purple-3-color: #d3adf7;
  --fc-purple-4-color: #b37feb;
  --fc-purple-5-color: #9254de;
  --fc-purple-6-color: #722ed1;

  /* Geek Blue / 极客蓝 */
  --fc-geekblue-1-color: #f0f5ff;
  --fc-geekblue-2-color: #d6e4ff;
  --fc-geekblue-3-color: #adc6ff;
  --fc-geekblue-4-color: #85a5ff;
  --fc-geekblue-5-color: #597ef7;
  --fc-geekblue-6-color: #2f54eb;

  /* 渐变色 */
  --fc-gradient-1-color: linear-gradient(90deg, #ebf4fe 0%, #edf5fb 25%, #f1f1f9 50%, #f4f3f7 75%, #f3f4f6 100%);

  /* boxshadow*/
  --fc-boxshadow-base-color: rgba(0, 0, 0, 0.08);
  --fc-boxshadow-hover-color: rgba(0, 0, 0, 0.15);
}

/* -------------------  分割线 ------------------- */

/* 深色模式 */
.theme-dark {
  color-scheme: dark;
  --fc-fill-1: rgb(17 18 23);
  --fc-fill-2: rgb(24 27 31);
  --fc-fill-2-5: rgb(28 30 34);
  --fc-fill-3: rgb(34 37 43);
  --fc-fill-4: rgb(39 40 47);
  --fc-fill-5: rgb(47 48 55);
  --fc-fill-6: rgb(54 55 62);
  --fc-fill-7: rgb(62 63 70);
  --fc-fill-primary: rgb(148, 112, 255);
  --fc-fill-success: rgb(63 196 83);
  --fc-fill-warning: rgb(230 198 39);
  --fc-fill-alert: rgb(250 125 0);
  --fc-fill-error: rgb(255 101 107);
  --fc-fill-gold: #ffbc0d;

  /* 文本 */
  --fc-text-link: #9470ff;
  --fc-text-link-rgb: 148, 112, 255;
  --fc-text-1: rgba(255, 255, 255);
  --fc-text-2: rgb(204, 204, 220);
  --fc-text-3: rgba(204, 204, 220, 0.85);
  --fc-text-4: rgba(204, 204, 220, 0.65);
  --fc-text-5: rgba(204, 204, 220, 0.45);
  --fc-text-placeholder: rgba(204, 204, 220, 0.65);

  /* 其他 */
  --fc-primary-color: var(--fc-text-link);
  --fc-border-color: rgba(204, 204, 220, 0.12);
  --fc-border-color2: rgba(204, 204, 220, 0.2);
  --fc-border-base: var(--fc-fill-5);
  --fc-antd-border-color: #ccccdc33;
  --fc-background-color-light: rgba(255, 255, 255, 0.04);

  /* 需特殊处理额外加的变量 */
  --fc-variable-fill-1: var(--fc-fill-3);

  /* 红色 */
  --fc-red-1-color: #2a1215;
  --fc-red-2-color: #431418;
  --fc-red-3-color: #58181c;
  --fc-red-4-color: #6f1a20;
  --fc-red-5-color: #851c24;
  --fc-red-6-color: #9b1e28;

  /* 橘色 */
  --fc-orange-1-color: #2a1a0e;
  --fc-orange-2-color: #431f11;
  --fc-orange-3-color: #582414;
  --fc-orange-4-color: #6f2917;
  --fc-orange-5-color: #85331a;
  --fc-orange-6-color: #9b3d1d;

  /* 金色 */
  --fc-gold-1-color: #2a1c0e;
  --fc-gold-2-color: #432011;
  --fc-gold-3-color: #582714;
  --fc-gold-4-color: #6f2b17;
  --fc-gold-5-color: #853f1a;
  --fc-gold-6-color: #9b531d;

  /* 绿色 */
  --fc-green-1-color: #132a13;
  --fc-green-2-color: #1f431f;
  --fc-green-3-color: #295829;
  --fc-green-4-color: #336f33;
  --fc-green-5-color: #3d853d;
  --fc-green-6-color: #479b47;

  /* 紫色 */
  --fc-purple-1-color: #1a132a;
  --fc-purple-2-color: #261f43;
  --fc-purple-3-color: #2f2958;
  --fc-purple-4-color: #38336f;
  --fc-purple-5-color: #414d85;
  --fc-purple-6-color: #4a579b;

  /* Geek Blue / 极客蓝 */
  --fc-geekblue-1-color: #111d2c;
  --fc-geekblue-2-color: #112a45;
  --fc-geekblue-3-color: #15395b;
  --fc-geekblue-4-color: #164c7e;
  --fc-geekblue-5-color: #1765ad;
  --fc-geekblue-6-color: #177ddc;

  /* 渐变色 */
  --fc-gradient-1-color: linear-gradient(90deg, #272c3c 0%, #24253b 25%, #221f33 50%, #1e1e28 75%, #181b1f 100%);

  /* boxshadow*/
  /* --fc-boxshadow-base-color: green;
  --fc-boxshadow-hover-color: red; */
  --fc-boxshadow-base-color: rgba(0, 0, 0, 0.28);
  --fc-boxshadow-hover-color: rgba(0, 0, 0, 0.45);
}

.theme-light-gold {
  --fc-fill-primary: #ffbc0d;
  --fc-primary-color: #ffbc0d;
  --fc-gold-text: #222;
  --fc-text-link: #4880ff;
}
